<template>
  <div class="landing">
    <div class="dark-overlay landing-inner text-light">
      <div class="container">
        <div class="row">
          <div class="col-md-12 text-center mt-3">
            <h1 class="display-3 mb-4 font">知友在线</h1>

            <hr>
            <!-- <a href="register.html" class="btn btn-lg btn-info mr-2">注册</a>
            <a href="login.html" class="btn btn-lg btn-light">登录</a>-->
            <router-link to="/register" class="btn btn-lg btn-info mr-2" v-show="!islogin">注册</router-link>
            <router-link to="/login" class="btn btn-lg btn-light" v-show="!islogin">登录</router-link>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  data() {
    return {};
  },
  components: {},
  methods: {
    islogin() {
      const islogin = this.$store.getters(state.isAuthenticated);
      return islogin;
    },
    logout() {
      //删除token
      window.localStorage.removeItem("jwt");

      //重置用户状态
      this.$store.dispatch("setIsAuthenticated", false);
      //重置用户信息
      this.$store.dispatch("setUser", {});
      //跳转页面
      this.$router.push("/login");
    }
  },
  computed: {
    islogin() {
      if (this.$store.getters.isAuthenticated) {
        return true;
      } else {
        return false;
      }
    }
  }
};
</script>

<style scoped>
img {
  width: 100%;
}

.landing {
  position: relative;
  /* background: url("./../assets/showcase.jpg") no-repeat; */
  background-size: cover;
  background-position: center;
  height: 100vh;
  margin-top: -24px;
  margin-bottom: -50px;
}

.landing-inner {
  padding-top: 80px;
}

.dark-overlay {
  /* background-color: rgba(0, 0, 0, 0.9); */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.card-form {
  opacity: 0.9;
}

.latest-profiles-img {
  width: 40px;
  height: 40px;
}

.form-control::placeholder {
  color: #bbb !important;
}
.font {
  font-family: "Sans-serif";
  font-weight: 700;
  color: #17a2b8;
}
</style>
